<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>登录</title>

  <link rel="stylesheet" href="./styles/base.css">
  <link rel="stylesheet" href="./styles/login.css">
  <link rel="stylesheet" href="./js/lib/bootstrap-4.6.2/css/bootstrap.min.css">
  <script src="./js/lib/jquery-3.7.1.min.js"></script>
  <script src="./js/lib/bootstrap-4.6.2/js/bootstrap.min.js"></script>
</head>

<body>
  <div class="login">
    <div class="top-info">
      <img src="./images/logo-hg.jpg" alt="">
      <div class="title">买账号选辉光~~~~~~~~</div>
    </div>
    <div class="login-container">
      <img class="login-left-img" src="./images/login-left-img.png" alt="">
      <div class="login-box">
        <ul id="myTab">
          <li class="nav-item active">
            <div class="title">账号登录</div>
            <div class="bar"></div>
          </li>
          <li class="nav-item">
            <div class="title">手机登录</div>
            <div class="bar"></div>
          </li>
        </ul>
        <form class="tab-content">
          <div class="tab-pane" style="display: block;">
            <div class="form-group">
              <img src="./images/user-name.png" class="input-icon" alt="">
              <input type="text" class="form-control" placeholder="请输入用户名">
            </div>
            <div class="form-group">
              <img src="./images/password.png" class="input-icon" alt="">
              <input type="password" class="form-control" placeholder="请输入密码">
            </div>
            <div class="link"><a href="#">注册账号</a> <a href="#">忘记密码</a></div>
            <div class="submit-btn">
              <button type="submit">登录</button>
            </div>
          </div>
          <div class="tab-pane">
            <div class="form-group">
              <img src="./images/user-name.png" class="input-icon" alt="">
              <input type="text" class="form-control" placeholder="请输入手机号">
            </div>
            <div class="form-group">
              <img src="./images/password.png" class="input-icon" alt="">
              <input type="password" class="form-control" placeholder="请输入密码">
            </div>
            <div class="link"><a href="#">注册账号</a> <a href="#">忘记密码</a></div>
            <div class="submit-btn">
              <button type="submit">登录</button>
            </div>
          </div>
        </form>
      </div>
    </div>
    <!-- 底部声明 -->
    <div class="site-info">
      <div class="layout-1226">
        <!-- 声明文字 -->
        <div>
          <p>
            <a href="javaScript:;">关于我们</a>
            <span>|</span>
            <a href="javaScript:;">联系我们</a>
            <span>|</span>
            <a href="javaScript:;">隐私政策</a>
            <span>|</span>
            <a href="javaScript:;">政务协议</a>
            <span>|</span>
            <a href="javaScript:;">帮助中心</a>
          </p>
          <p>
            <a href="javaScript:;">备案号：xxxxxxxxxx</a>
            <a href="javaScript:;">公司名称：江苏辉光网络科技有限公司</a>
            <a href="javaScript:;">© 版权所有</a>
          </p>
        </div>
      </div>
    </div>
  </div>
</body>
<script>
  $('#myTab li').on('click', function (event) {
    //1.当前li添加active属性，其他兄弟清除active属性
    $(this).addClass("active").siblings().removeClass("active");

    //2.获取当前li的下标

    let index = $(this).index();

    //3.对应的div实现显示，兄弟隐藏

    $(".tab-pane").eq(index).show().siblings().hide();
  })
</script>

</html>